<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script lang="ts">
type SvgName = 'baidu' | 'bing' | 'google' | 'yuque' | 'juejin'
import { defineComponent, PropType, computed } from 'vue'
const requireAll = (requireContext: any) => {
  const list = []
  for (const path in requireContext) {
    list.push(requireContext[path])
  }
  return list
}
const req = import.meta.globEager('../../../icons/svg')
requireAll(req)
export default defineComponent({
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String as PropType<SvgName>,
      required: true,
    },
    className: {
      type: String,
    },
  },
  setup(props) {
    const svgClass = computed({
      get: () => {
        if (props.className) {
          return 'svg-icon ' + props.className
        } else {
          return 'svg-icon'
        }
      },
      set: (val) => {
        svgClass.value = val
      },
    })
    const iconName = computed({
      get: () => `#icon-${props.iconClass}`,
      set: (val) => {
        iconName.value = val
      },
    })
    return {
      svgClass,
      iconName,
    }
  },
})
</script>
<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
